<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>安徽兴宇轨道装备有限公司可视化看板</title>

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!-- 引入 Video.js 样式 -->
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet">
</head>
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
<body>
    
    <!-- 创建总视窗 -->
    <div class="viewport">
         <!-- 创建显示列，共三列，左侧第一列 -->
        <div class="column">
            <!-- 创建概述面板，第一列顶部框 -->
            <div class="overview panel">
                <!-- 创建内容块 -->
                <div class="inner">
                    <!-- 创建第一项 -->
                    <div class="item">
                        <!-- 设置设备数量 -->
                        <h4>200</h4>

                        <script>
                        </script>

                        
                        <!-- 添加设备总数及前缀图标 -->
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            设备总数
                        </span>
                    </div>
                    <!-- 创建第二项 -->
                    <div class="item">
                        <!-- 设置在线设备数量 -->
                        <h4>75</h4>
                        <!-- 添加在线设备数量及前缀图标 -->
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            在线设备数
                        </span>
                    </div>
                    <!-- 创建第三项 -->
                    <div class="item">
                        <!-- 设置离线设备数量 -->
                        <h4>125</h4>
                        <!-- 添加离线设备数量及前缀图标 -->
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            离线设备数
                        </span>
                    </div>
                </div>
            </div>
            <!-- 创建设备清单，第一列中部框 -->
            <div class="monitor panel">
                <!-- 创建内容块 -->
                <div class="inner">
                    <!-- 创建表头 -->
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">设备清单</a>
                    </div>
                    <!-- 创建表格 -->
                    <div class="content" style="display: block;">
                        <!-- 创建表格划分列 -->
                        <div class="head">
                            <span class="col">设备代码</span>
                            <span class="col">设备地址</span>
                            <span class="col">设备状态</span>
                        </div>
                        <!-- 创建表格清单框 -->
                        <div class="marquee-view">
                            <!-- 创建清单项框 -->
                            <div class="marquee">
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20250313</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20250213</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20250113</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20241213</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20241113</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20241013</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240913</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240813</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240713</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240613</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">异常时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20250313</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20250213</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20250113</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20241213</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                 <!-- 创建项 -->
                                 <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20241113</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!-- 行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20241013</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240913</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240813</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240713</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                                <!-- 创建项 -->
                                <div class="row">
                                    <!-- 设备代码 -->
                                    <span class="col">20240613</span>
                                    <!-- 设备地址 -->
                                    <span class="col">安徽省蚌埠是高新区高新路</span>
                                    <!-- 在线状态 -->
                                    <span class="col">在线</span>
                                    <!--  行前图标 -->
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 创建第一列，底部框 -->
            <div class="point panel">
                <!-- 创建内容块 -->
                <div class="inner">
                    <!-- 创建标题 -->
                    <h3>现场设备分布统计</h3>
                    <!-- 创建图表块 -->
                    <div class="chart">
                        <!-- 创建圆形分布图 -->
                        <div class="pie"></div>
                        <!-- 创建数据块 -->
                        <div class="data">
                            <!-- 创建数据项目 -->
                            <div class="item">
                                <!-- 设置现场设备总数 -->
                                <h4>180</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    现场设备数
                                </span>
                            </div>
                            <div class="item">
                                <!-- 设置本月新增数 -->
                                <h4>20</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增数
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 创建显示列，第二列 -->
        <div class="column">
            <!-- 创建地图 -->
            <div class="map">
                <!-- 设置标题 -->
                <h3>
                    <span class="icon-cube"></span>
                    设备地理位置
                </h3>
                <!-- 创建地图块 -->
                <div class="chart">

                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="video-grid">
                <div class="btn-grid">
                <button class="bus-slect-btn" data-channel="1">车辆1</button>
                <button class="bus-slect-btn" data-channel="2">车辆2</button>
                <button class="bus-slect-btn" data-channel="3">车辆3</button>
                <button class="bus-slect-btn" data-channel="4">车辆4</button>
                </div>
                <div class="iframe-container">
                    <iframe src="http://8.134.114.6:8088/808gps/open/hls/index.html?lang=zh&vehiIdno=888134&account=VS888134&password=000000&channel=1"
                            allowfullscreen></iframe>
                </div>
                
            </div>
        </div>

    </div>


</body>

<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/index.js"></script>

<script src="./js/china.js"></script>
<script src="./js/mymap.js"></script>

<script>
 // 获取所有按钮和 iframe 元素
    const buttons = document.querySelectorAll('.bus-slect-btn');
    const iframe = document.getElementById('video-iframe');

    // 为每个按钮添加点击事件监听器
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            // 获取按钮的 data-channel 属性值
            const channel = this.getAttribute('data-channel');
            // 更新 iframe 的 src 属性
            iframe.src = `http://8.134.114.6:8088/808gps/open/hls/index.html?lang=zh&vehiIdno=888134&account=VS888134&password=000000&channel=${channel}`;
        });
    });

</script>
</html>